<template>
  <div class="box">
    用户信息
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="用户" width="180" />
      <el-table-column prop="subscribers" label="被订阅人数" width="180" />
      <el-table-column prop="address" label="订阅人数" />
      <el-table-column prop="fans" label="艺术品收藏" />
      <el-table-column prop="account" label="账户">
        <template #default="scope">
          <el-button size="small" @click="changeData">修改</el-button>
          <el-button
            size="small"
            type="danger"
            @click="deleteData(scope.$index, scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- ........................... -->
  <el-button text @click="dialogFormVisible = true"
    >open a Form nested Dialog</el-button
  >

  <el-dialog v-model="dialogFormVisible" title="Shipping address">
    <el-form :model="form">
      <el-form-item label="Promotion name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Zones" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from "vue";
// import { useRouter } from "vue-router";

// const router = useRouter();
// const dialogTableVisible = ref(false);
// const dialogFormVisible = ref(false);
// const formLabelWidth = "140px";

const data = {
  model: false,
};
const tableData = [
  {
    name: "水树奈奈",
    subscribers: "126864",
    address: "58",
    fans: "996",
    account: "3154899156965",
  },
  {
    name: "上原野衣",
    subscribers: "165985",
    address: "66",
    fans: "007",
    account: "3213246598986",
  },
  {
    name: "优目碧",
    subscribers: "165976",
    address: "28",
    fans: "134",
    account: "6597646722362",
  },
  {
    name: "中岛樱",
    subscribers: "264976",
    address: "19",
    fans: "568",
    account: "2356549842345",
  },
];
const newData = {
  name: "",
  subscribers: "",
  address: "",
  fans: "",
  account: "",
};

const changeData = (b) => {
  console.log("弹出修改框");
  newData.name = b.name;
  newData.subscribers = b.subscribers;
  newData.address = b.address;
  newData.fans = b.fans;
  newData.account = b.account;
};
const change = (a) => {
  tableData[a] = newData;
  console.log("修改成功", a, b);
};
const deleteData = (a, b) => {
  console.log("删除成功", a, b, b.name);
  tableData.splice[(a, 1)];
};
</script>

<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>